<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <eHeader :dict="dict" :permission="permission" />
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="majorname" label="专业名称" />
      <el-table-column prop="majorcode" label="专业代码" />
      <el-table-column prop="classname" label="班级名称" />
      <el-table-column prop="classnum" label="人数" />
      <el-table-column prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-permission="['admin','grade:edit','grade:del','grade:add']"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" style="margin-bottom: 3px" icon="el-icon-setting" @click="settingTeachTime(scope.row.id)" />
          <udOperation
            style="display: inline"
            :data="scope.row"
            :permission="permission"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <!--表单渲染-->
    <eForm />
    <el-dialog
      title="请选择可排课周次"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form">
        <el-form-item label="请选择可排课周次">
          <el-select
            v-model="choiceWeek"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSettingWeek">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import crudGrade from '@/api/teach/grade'
import eHeader from './module/header'
import eForm from './module/form'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import { setWeek } from '@/api/teach/grade'
import { initChoise } from '@/api/teach/grade'
import { getWeekSum } from '@/api/teach/session'

export default {
  name: 'Grade',
  components: { eHeader, eForm, crudOperation, pagination, udOperation },
  cruds() {
    return CRUD({
      title: '班级',
      url: 'api/grade',
      sort: ['createTime,asc', 'id,desc'],
      crudMethod: { ...crudGrade }
    })
  },
  mixins: [presenter()],
  dicts: ['grade_type'],
  data() {
    return {
      permission: {
        add: ['admin', 'grade:add'],
        edit: ['admin', 'grade:edit'],
        del: ['admin', 'grade:del']
      },
      dialogVisible: false,
      choiceWeek: [],
      curChoiceGrade: '',
      allWeekNum: 17,
      options: [{
        value: 1,
        label: '第1周'
      }, {
        value: 2,
        label: '第2周'
      }, {
        value: 3,
        label: '第3周'
      }, {
        value: 4,
        label: '第4周'
      }, {
        value: 5,
        label: '第5周'
      }, {
        value: 6,
        label: '第6周'
      }]
    }
  },
  methods: {
    makeWeekSumOption(weeksum) {
      this.options = []
      for (let i = 1; i <= weeksum; i++) {
        this.options.push({
          value: i,
          label: '第' + i + '周'
        })
      }
      console.log(this.options)
    },
    initWeekSum() {
      getWeekSum(this.curChoiceGrade).then(res => {
        if (res === '') {
          this.$message.error('周数获取失败，请检查本学期是否设置了周数')
          return
        }
        this.makeWeekSumOption(res.data)
        // eslint-disable-next-line handle-callback-err
      }, err => {
        this.$message.error('周数获取失败，请检查本学期是否设置了周数')
      })
    },
    initChoise() {
      this.choiceWeek = []
      initChoise(this.curChoiceGrade).then(res => {
        if (res === '') {
          this.choiceWeek = []
          this.dialogVisible = true
          return
        }
        this.choiceWeek = res.split(',').map(Number)
        this.dialogVisible = true
        // eslint-disable-next-line handle-callback-err
      }, err => {
        this.$message.error('获取失败')
      })
    },
    settingTeachTime(id) {
      this.curChoiceGrade = id
      this.initWeekSum()
      this.initChoise()
    },
    confirmSettingWeek() {
      const param = {
        studyweek: this.choiceWeek
      }
      setWeek(this.curChoiceGrade, param).then(res => {
        this.$message.success('设置成功')
        this.dialogVisible = false
        // eslint-disable-next-line handle-callback-err
      }, err => {
        this.$message.success('设置失败,请重试')
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
